<template>
  <div>
    <!-- 搜索框模板 -->
    <form action="/">
      <van-search
        @clear="isShow = false"
        v-model="value"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <!-- 滑动单元格 -->
    <div v-if="isShow" style="width:100%;">
      <van-swipe-cell v-for="item in seekList" :key="item.id">
        <van-cell
          :border="false"
          :title="item.name"
          :value="item.ctime.substring(0, 10)"
        ></van-cell>
        <template slot="right">
          <van-button
            @click="delGoods(item.id)"
            square
            type="danger"
            text="删除"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 搜索历史模板 -->
    <div v-else class="storage">
      <div class="top">
        <p>搜索历史</p>
        <!-- 删除按钮图标 -->
        <van-icon @click="delHistory" name="delete" />
      </div>
      <!-- tag标签 -->
      <div style="padding:5px 10px;">
        <van-tag
          style="margin:0 5px;"
          v-for="(item, index) in storage"
          :key="index"
          size="medium"
          >{{ item }}</van-tag
        >
        <!-- 分割线 -->
        <van-divider
          v-if="storage.length == 0"
          :style="{ color: '#333', borderColor: '#ccc', padding: '0 16px' }"
          >暂无搜索历史</van-divider
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      // 搜索数据列表的显示与隐藏
      isShow: 'false',
      // 搜索的数据列表
      seekList: [],
      // 历史信息数组
      storage: []
    }
  },
  mounted() {
    this.storage = JSON.parse(
      window.localStorage.getItem('historysearch') || '[]'
    )
    this.isShow = false
  },
  methods: {
    // 搜索框回车键事件
    async onSearch() {
      if (this.value.trim().length === 0) {
        this.isShow = 'false'
        return this.$toast('请输入搜索内容')
      }

      // 获取数据列表
      const { data: res } = await this.$http.get(`/api/getprodlist`)
      this.seekList = res.message
      this.isShow = true
      var index = this.storage.indexOf(this.value)
      if (index !== -1) {
        this.storage.splice(index, 1)
      }
      this.storage.unshift(this.value)
      // this.storage = this.storage.splice(0, 10)
      localStorage.setItem('historysearch', JSON.stringify(this.storage))
    },

    // 搜索框取消点击事件
    onCancel() {
      this.isShow = false
    },
    // 滑动单元格删除事件
    delGoods(id) {
      this.$dialog
        .confirm({
          title: '警告',
          message: '是否确认删除该信息？'
        })
        .then(async () => {
          const { data: res } = await this.$http.get(`/api/delproduct/` + id)
          if (res.status === 0) {
            const { data: res } = await this.$http.get(`/api/getprodlist`)
            this.seekList = res.message
            this.$notify({
              message: '删除成功',
              duration: 1500,
              background: 'green'
            })
          }
        })
        .catch(() => {
          this.$notify('取消删除')
        })
    },
    // 历史记录 删除图标 删除事件
    delHistory() {
      window.localStorage.removeItem('historysearch')
      this.storage = []
    }
  }
}
</script>

<style lang="less" scoped>
.storage .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
}
</style>
